<template>
	<view class="page">
		<view class="top-pannel">
            <view class="home-banner"></view>
            <view class="welcome-pannel">
                <view class="user-pannel">
                    <view class="avatar">
                        <image title="doctor" src="/static/doctor2.png" 
                            mode="aspectFit" 
                            style="width: 84rpx;height: 84rpx;margin-top: 8rpx;"></image>
                    </view>
                    <view class="name">
                        <view>您好，{{info.nickName}}</view>
                        <view class="phone">登录账号：{{info.account}}</view>
                    </view>
                    <view class="setting">
                        <image
                            src="/static/setting.png" title="logout"
                            mode="aspectFit" 
                            style="width: 36rpx;height: 36rpx;"></image>
                    </view>
                </view>
                <view class="user-count">
                    <view>今日筛查：<span>9</span></view>
                    <view>待筛查：<span>9</span></view>
                    <view>已筛查：<span>126</span></view>
                </view>
            </view>
        </view>
        <view class="school-select-pannel">
            <view class="select-wrapper">
                <view class="select-title">选择学校</view>
                <picker @change="schoolChange" v-if="schools.length > 0"
                    :value="s_idx" 
                    :range="schools" 
                    range-key="schoolName" 
                    class="picker-view">
                    <view class="uni-input">{{ schools[s_idx].schoolName }}</view>
                </picker>
                <view class="placeholder" v-else>未选择学校</view>
            </view>
            <view class="select-wrapper">
                <view class="select-title">选择班级</view>
                <picker @change="classesChange" v-if="classes.length > 0"
                    :value="c_idx" 
                    :range="classes" 
                    range-key="classesName" 
                    class="picker-view">
                    <view class="uni-input">{{ classes[c_idx].classesName }}</view>
                </picker>
                <view class="placeholder" v-else>未选择班级</view>
            </view>
            <button type="primary" class="submit-btn" @click="handleStart">开始</button>
        </view>
	</view>
</template>

<script>
    import { getInfo } from '@/api/login.js' 
    import { getClasses } from '@/api/screen.js'
	export default {
		data() {
			return {
                info: {
                    nickName: '',
                    account: ''
                },
				schools: [],
				classes: [],
				s_idx: 0,
                c_idx: 0,
                selectCla: undefined
			}
		},
		onLoad() {
            this.handleGetInfo()
		},
		methods: {
            handleGetInfo() {
                //获取用户信息及绑定的学校
                getInfo().then(res => {
                    console.log(res)
                    let userInfo = res.user.user
                    this.info.account = userInfo.userName
                    this.info.nickName = userInfo.nickName
                    //用户绑定学校
                    this.schools = res.schools
                    //查询一次班级列表
                    this.handleGetClasses(this.schools[this.s_idx].schoolId)
                })
            },
            schoolChange(e) {
                this.s_idx = e.detail.value
                let schoolId = this.schools[e.detail.value].schoolId
                // console.log(schoolId)
                this.handleGetClasses(schoolId)
            },
            //获取班级列表
            handleGetClasses(schoolId) {
                //根据学校查询班级
                getClasses({ schoolId: schoolId }).then(res => {
                    console.log(res.data)
                    let tempArr = res.data.classes
                    this.classes = []
                    for (var index = 0; index < tempArr.length; index++) {
                        var ele = tempArr[index];
                        this.classes.push({ 
                            classesId: ele.id,
                            classesName: ele.grade + '级' + ele.name
                        })
                    }
                    //每次重新获取班级列表，重置当前选中的班级
                    this.c_idx = 0
                    this.selectCla = this.classes[this.c_idx]
                    // console.log(this.classes)
                })
            },
            classesChange(e) {
                // console.log(e.detail.value)
                this.c_idx = e.detail.value
                this.selectCla = this.classes[e.detail.value]
            },
            
            handleStart() {
                console.log(this.selectCla)
                if(this.selectCla == undefined) {
                    uni.showToast({
                        title: '未选择班级',
                        icon: 'none',
                        duration: 1200
                    })
                    return
                }
                uni.navigateTo({
                    url: '/pages/list/list?classesId=' + this.selectCla.classesId 
                        + '&classesName=' + this.selectCla.classesName 
                })
            }
		}
	}
</script>

<style lang="less">
	@import url('./index.less');
</style>
